<template xmlns:v-slot="http://www.springframework.org/schema/rabbit">
    <div id="app">
        <v-app light>
            <v-app-bar
                    absolute
                    light
                    shrink-on-scroll
                    height="66"
                    color="white"
                    scroll-target="#scrolling-techniques-2"
            >
                <template v-slot:img="{ props }">
                    <v-img
                            v-bind="props"
                            gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
                    />
                </template>

                <v-toolbar-title class="headline text-uppercase">
                    <v-img
                            src="@/assets/files/cats.jpg"
                            aspect-ratio="2.2"
                            class="grey lighten-2"
                    />
                    <span class="logo" @click="$goRoute('/#')">NutsChan</span>
                    <span class="font-weight-light logo" @click="$goRoute('/#')">.blog</span>
                </v-toolbar-title>

                <div class="flex-grow-1"></div>

                <v-spacer/>
                <v-toolbar-items>
                    <v-tabs
                            light
                            v-model="$store.state.sys.checkMenuNav"
                            height="62"
                            slider-color="brown"
                            align-with-title
                            background-color="transparent"
                    >
                        <v-tab
                                v-for="item in menuTabs"
                                :key="item.id"
                                @click="switchTab(item)"
                        >
                            {{ item.name }}
                        </v-tab>
                    </v-tabs>
                </v-toolbar-items>

                <v-menu
                        right
                        bottom
                >
                    <template v-slot:activator="{ on }">
                        <v-btn
                                icon
                                v-on="on"
                                class="ma-auto"
                        >
                            <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                    </template>

                    <v-list>
                        <v-list-item
                                v-for="menu in moreMenu"
                                :key="menu.name"
                                @click="jumpTo(menu.href)"
                        >
                            <v-list-item-title>{{ menu.name }}</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
                <v-btn
                        color="blue lighten-2"
                        dark
                        class="ma-auto"
                        @click="newBlog"
                >
                    <v-icon left>mdi-pencil-box-outline</v-icon>
                    写博客
                </v-btn>
            </v-app-bar>

            <v-sheet
                    id="scrolling-techniques-2"
            >
                <router-view/>
                <!--播放器-->
                <Music/>
            </v-sheet>
            <AppFooter/>
        </v-app>

    </div>
</template>

<script>
    import 'assets@/css/business/appbar/appbar.scss'
    import Music from '@/components/plugins/Aplayer.vue';
    import AppFooter from '@/components/common/AppFooter.vue';

    import {mapState} from 'vuex';

    export default {
        name: 'App',
        components: {
            Music,
            AppFooter
        },
        data: () => ({
            //tab设置
            title: 'Nutschan.BLOG',
            tab: null,
            icons: true,
            prevIcon: false,
            right: true,
            checkMenuNav: 0,
            menuTabs: [
                {
                    id: "1",
                    name: "首页",
                    url: "/"
                },
                {
                    id: "2",
                    name: "IT之道",
                    url: "/"
                },
                {
                    id: "3",
                    name: "博客",
                    url: "/home"
                },
                {
                    id: "4",
                    name: "视野",
                    url: "/"
                },
                {
                    id: "5",
                    name: "阅读",
                    url: "/"
                },
                {
                    id: "6",
                    name: "留言板",
                    url: "/"
                }
            ],
            moreMenu: [{name: "友链", href: "https://touduyu.com/?fr=qgroup"}, {
                name: "高效搜罗",
                href: "http://www.gaoxiaosouluo.cn/"
            }, {name: "小酒馆", href: "https://www.bilibili.com/"}, {
                name: "你我他",
                href: "/parallax"
            }, {
                name: "关于我",
                href: "/parallax"
            }]
        }),
        methods: {
            jumpTo(href) {
                window.open(href, '_blank');
            },
            newBlog() {
                // let routeData = this.$router.resolve({
                //     name: "newBlog"
                // });
                this.$goRoute("/newBlog");
                // window.open(routeData.href, '_blank');
            },
            switchTab(item) {
                this.$store.state.sys.checkMenuNav = item.id;
                this.$goRoute(item.url);
            }
        },
        mounted() {

        },
        created() {
            // 在页面加载时读取sessionStorage
            if (this.$cookie.get('store')) {
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(this.$cookie.get('store'))))
            }
            // 在页面刷新时将store保存到sessionStorage里
            window.addEventListener('beforeunload', () => {
                this.$cookie.set('store', JSON.stringify(this.$store.state))
            });


        },
        computed: {}


    };
</script>
